<!--
 * @Description:基础弹窗
 * @Version: 2.0
 * @Autor: kafei
 * @Date: 2021-12-01 16:53:38
 * @LastEditors: kafei
 * @LastEditTime: 2021-12-07 19:24:28
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
    class="baseDialog"
    append-to-body
  >
    <slot name="content" />
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="dialogVisible = false"
      >取 消</el-button>
      <el-button
        type="primary"
        size="small"
        @click="comfire"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'BaseDialog',
  props: {
    beforComfire: { // 点击确定的前置事件
      type: Function,
      default: undefined
    },
    title: {
      type: String,
      default: '标题'
    }
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    async comfire () {
      if (this.beforComfire) {
        const result = await this.beforComfire()
        this.dialogVisible = !result
      } else {
        this.handleClose()
        this.$emit('comfire')
      }
    },
    show () {
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>

<style>

</style>
